import React, { ReactElement, useContext } from 'react';
import { View, Image, Text, ScrollView } from 'react-native';
import { filter } from 'ramda';
import { RtcLocalView, RtcRemoteView } from 'react-native-agora';

import styles from './style';
import Button from '../../../../components/Button';
import { Store } from '../../reducer';
import { setShowProblemWait } from '../../actions';
import { PPTType, UserRole } from '../../constant';
import { getUserInfo } from '../../../../store/user';
import { LiveUser } from '../../types';
import { disableTextStyle } from '../../../../constant/style';
import { problemWaitDone } from '../../../../constant/resource';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const {
    showProblemWait,
    users,
    isJoinedChannel,
    channel,
    currentPPT
  } = state;

  const showProblem = currentPPT.type === PPTType.Problem;

  if (!showProblemWait) {
    return <View />;
  }

  const students = filter(
    (item: LiveUser): boolean => item.userRole === UserRole.Student
  )(users);
  const { userId: selfUserId } = getUserInfo();

  const doProblemNumber = students.filter(
    (student): boolean => !!student.haveAnswer
  ).length;

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <Text
          style={styles.desc}
        >{`当前还有${doProblemNumber}位同学正在答题，稍等一下哦～`}</Text>
        <View style={styles.students}>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.loadStudents}
          >
            {students.map(
              ({ userId, haveAnswer, userNickName }): ReactElement => {
                return (
                  <View style={styles.item}>
                    <View
                      style={[
                        styles.loadVideo,
                        showProblem && !haveAnswer ? styles.doing : {}
                      ]}
                    >
                      {selfUserId === String(userId) &&
                        isJoinedChannel &&
                        channel &&
                        showProblemWait && (
                          <RtcLocalView.SurfaceView
                            style={styles.video}
                            renderMode={1}
                            channelId={channel}
                          />
                        )}
                      {selfUserId !== String(userId) &&
                        isJoinedChannel &&
                        channel &&
                        showProblemWait && (
                          <RtcRemoteView.SurfaceView
                            style={styles.video}
                            renderMode={1}
                            channelId={channel}
                            uid={Number(userId)}
                          />
                        )}
                      {showProblem && haveAnswer && (
                        <View style={styles.mask}>
                          <Image
                            style={styles.icon}
                            source={problemWaitDone}
                            resizeMode="contain"
                          />
                        </View>
                      )}
                      {showProblem && !haveAnswer && (
                        <View style={styles.mask}>
                          <Text style={styles.maskDesc}>正在做题</Text>
                        </View>
                      )}
                    </View>
                    <Text
                      style={[
                        styles.name,
                        showProblem && !haveAnswer ? styles.doingName : {}
                      ]}
                      numberOfLines={1}
                    >
                      {userNickName}
                    </Text>
                  </View>
                );
              }
            )}
          </ScrollView>
        </View>
        <Button
          text="知道了"
          style={styles.confirm}
          disableTextStyle={disableTextStyle}
          textStyle={styles.confirmDesc}
          onPress={(): void => {
            setShowProblemWait(false);
          }}
        />
      </View>
    </View>
  );
};
